<template>
	<view class="all_store" :class="themeName">
		<u-sticky offset-top="0" h5-nav-height="0">
			<!-- 搜索 -->
			<view class="search-input">
				<u-search class="flex-1" v-model="searchName" height="72" bg-color="#F4F4F4" :show-action="false" placeholder="门店名称" @search="handleSearch" />
			</view>
		</u-sticky>
		<mescroll-uni ref="mescrollRef" bgColor="white" top="0" 
		@init="mescrollInit" :down="{ auto: false }" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="store-container">
				<view v-for="(item, index) in lists" :key="index" class="store-item m-b-20" @click.stop="storeDetail(item.id)">
					<view class="flex row-between">
						<image class="img" :src="item.image" mode=""></image>
						<view class="s-boxs">
							<view class="header-title md bold">{{ item.name }}</view>
							<view class="sm lighter">电话：{{item.mobile}}</view>
							<view class="sm lighter line-2">店址：{{item.address}}</view>
							<view class="sm lighter">距离：{{item.distance}}</view>
						</view>
						<view class="s-go m-l-20" @click.stop="daohang(item.latitude,item.longitude,item.address)">一键导航</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<!-- #ifdef MP-WEIXIN -->
		<map id="map" hidden="true"></map>
		<!-- #endif -->
		<tabbar />
	</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
import { shops } from '@/api/store.js';
import Map from '@/js_sdk/fx-openMap/openMap.js'
export default {
	mixins: [MescrollMixin],
	name: 'AllStore',
	data() {
		return {
			location: {
				latitude:'',
				longitude:''
			}, // 我的位置
			searchName: '',
			loading: true,
			type: '',
			lists: [],
			upOption: {
				auto: false, // 不自动加载
				noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: '/static/images/empty/gift.png',
					tip: '暂无门店', // 提示
					fixed: true,
					top: '200rpx'
				}
			}
		};
	},

	methods: {
		// 获取位置
		async getLocation() {
			const [error, data] = await uni.getFuzzyLocation({
				type: 'wgs84'
			});
			// const [error, data] = await uni.getLocation({
			// 	type: 'gcj02'
			// });
			console.log(error)
			console.log(data)
			if (!data) return this.getAuthorize();
			return {
				latitude: data.latitude,
				longitude: data.longitude
			};
		},

		// 位置授权
		async getAuthorize() {
			const [error, data] = await uni.showModal({
				title: '您已拒绝地理位置权限',
				content: '是否进入权限管理，调整授权？'
			});

			if (data.confirm) {
				const [error, data] = await uni.openSetting();
				if (data) this.getLocation();
			} else if (data.cancel) {
				this.$Router.back();
			}
		},

		// 搜索
		handleSearch(value) {
			console.log(this.searchName);
			this.mescroll && this.mescroll.resetUpScroll();
		},
		// 下拉刷新
		downCallback() {
			this.upCallback({
				num: 1,
				size: 10
			});
		},
		// 上拉加载
		upCallback({ num, size }) {
			let params = {
				key: this.searchName,
				lon:this.location.longitude,
				lat:this.location.latitude,
				page_no: num,
				page_size: size
			}
			shops(params).then((res) => {
					if (num == 1) this.lists = []; //如果是第一页需手动置空列表
					this.lists = this.lists.concat(res.lists); //追加新数据
					this.mescroll.endSuccess(res.lists.length, res.count);
				})
				.catch((err) => {
					this.mescroll.endErr()
				});
		},
		// 详情
		storeDetail(id) {
			uni.navigateTo({
				url:'/others/pages/dealer/storedetail?id='+id
			})
		},
		
		// 导航
		daohang(latitude,longitude,address) {
			var options = {
				origin:{  //导航起点坐标和名称,如果不传则起点为当前位置
					// latitude:39.92848272,
					// longitude:116.39560823,
					// name:"广州塔"
				},
				destination:{  //导航终点点坐标和名称
					latitude:Number(latitude),
					longitude:Number(longitude),
					name:address
				},
				// #ifdef MP-WEIXIN
				mapId:"map",
				// #endif
				mode:"drive"  //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike;
			}
			//路线规划
			//Map.routePlan(options,"gcj02")
			//驾车导航，打开地图直接开启导航，只需要传入options.destination终点信息;
			Map.navigation(options,"gcj02")
		}
	},

	async onLoad() {
		try {
			const data = await this.getLocation();
			if (!data) throw new Error('位置获取失败');
			this.location = data;
			
			// console.log(this.location)
			// 防止获取不到mescroll
			setTimeout(() => {
				this.mescroll.resetUpScroll();
			}, 200);
		} catch (err) {
			console.log(err);
			this.$toast({
				title: err.message
			});
		}
	}
};
</script>
<style lang="scss">
.search-container {
	display: flex;
	flex-direction: column;
}
.search-input {
	display: flex;
	align-items: center;
	height: 100rpx;
	padding: 0 20rpx;
	background-color: #ffffff;
	position: relative;
	z-index: 2;
}
.store-container {
	padding-top: 120rpx;
	position: relative;
	z-index: 1;
	background-color: white;

	.store-item {
		padding: 20rpx 30rpx;
		border-radius: 10rpx;

		.img {
			width: 130rpx;
			height: 130rpx;
			margin-right: 20rpx;
		}
		.s-boxs {
			flex: 1;
			line-height: 36rpx;

			.line-2 {
				-webkit-line-clamp: 1;
			}
		}
		.s-go {
			white-space: nowrap;
			color: #0980cc;
			font-size: 28rpx;
		}
	}
}
</style>
